<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <script>
        function scroll() {
            //浜у搧婊氬姩
            var speed = 30; //鏁板瓧瓒婂ぇ閫熷害瓒婃參
            var tab = document.getElementById("demo");
            var tab1 = document.getElementById("demo1");
            var tab2 = document.getElementById("demo2");
            var liwidth = tab1.getElementsByTagName("li");
            var liwidths = liwidth[0].offsetWidth;
            var length = $("#demo1 li").length;
            var mleft = parseInt($("#demo1 li:eq(0)").css("marginLeft"));
            var mright = parseInt($("#demo1 li:eq(0)").css("marginRight"));
            var totalwidth = (liwidths + mleft + mright) * length * 2 + 300;
            $("#indemo").width(totalwidth);
            tab2.innerHTML = tab1.innerHTML;
            function Marquee() {
                if (tab2.offsetWidth - tab.scrollLeft <= 0)
                    tab.scrollLeft -= tab1.offsetWidth;
                else {
                    tab.scrollLeft++;
                }
            }
            var MyMar = setInterval(Marquee, speed);

            tab.onmouseover = function () {
                clearInterval(MyMar);
            };
            tab.onmouseout = function () {
                MyMar = setInterval(Marquee, speed);
            };
        }
    </script>
</body>

</html>